<template>
  <view v-if="productDetail.goods_id">
    <swiper
    	indicator-dots
      indicator-color="#ababac"
    	indicator-active-color="#000000"
      autoplay
      duration=1000
      circular
    >
      <swiper-item v-for="item in productDetail.goods_images" :key="item.file_id">
        <image :src="item.external_url"></image>
      </swiper-item>
    </swiper>

    <view class="title-box">
      <view class="price-box">
        <text class="price">￥<text>{{productDetail.goods_price_max}}</text></text>
        <text v-if="productDetail.line_price_max!=='0.00'" class="line-price">￥{{productDetail.line_price_max}}</text>
        <text class="sold">已售{{productDetail.goods_sales}}件</text>
      </view>
      <view class="title">{{productDetail.goods_name}}</view>
    </view>

    <view class="guarantee" @click="openPopup">
      <view><uni-icons type="checkmarkempty" size="26" color ="red"></uni-icons>七天无理由退货</view>
      <view><uni-icons type="checkmarkempty" size="26" color ="red"></uni-icons>48小时发货</view>
      <uni-icons class="right" type="forward" size="20" color="#9999b3"></uni-icons>
    </view>

    <view class="comment" v-if="commentCount" @click="goCommentPage">
      <view class="title">
        <text class="left">商品评价（{{commentCount}}条）</text>
        <view class="right">查看更多</view>
        <uni-icons class="icon-forward" type="forward" size="20" color="#9999b3"></uni-icons>
      </view>
      <CommentItem :data="productComment"></CommentItem>
    </view>

    <view class="content-title">商品描述</view>

    <view  v-for="(item,index) in contentArr" :key="index">
      <rich-text :nodes="item" v-if="index%2==0||index==0"></rich-text>
      <video :src="item" v-if="index%2==1" style="width: 100%;" controls></video>
    </view>

    <!-- <rich-text :nodes="productDetail.content" style="width:100%"></rich-text> -->

    <view class="footer">
      <uni-goods-nav fill  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>
    
    <uni-popup v-show="showPopup" type="bottom" ref="popup" class="popup" background-color="#fff" @change="changePopup">
      <view class="popup">
        <uni-icons type="closeempty" size="30" color="#737373;" class="icon-cross" @click="closePopup"></uni-icons>
        <view class="title">服务</view>
        <view class="item">
          <uni-icons type="checkmarkempty" size="22" color ="red" class="icon-ok"></uni-icons>
          <view class="service">七天无理由退货</view>
          <view class="desc">满足相应条件时，消费者可申请7天无理由退货</view>
        </view>
        <view class="item">
          <uni-icons type="checkmarkempty" size="22" color ="red" class="icon-ok"></uni-icons>
          <view class="service">48小时发货</view>
          <view class="desc">下单后48小时之内发货</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import CommentItem from '@/components/CommentItem'
export default {
  components:{
    CommentItem
  },
  data(){
    return {
      productDetail:{},
      goodsId:'',
      productComment:[],
      commentCount:'',
      showPopup:false,
      options: [
        {
          icon: 'shop',
          text: '店铺',
        },
        {
          icon: 'cart',
          text: '购物车',
          info: 2
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#ffb100',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#fc4329',
          color: '#fff'
        }
      ],
      contentArr:[]
    }
  },
 async onLoad({gid}){
    if(gid) {
    this.goodsId = gid
    await this.getProductDetail()
    await this.getProductComment()
    await this.getCommentCount()
    }
  },
  methods:{
    async getProductDetail(){
      const {data} = await this.$http.get('/goods/detail',{goodsId:this.goodsId})
      data.detail.content = data.detail.content.replace(/\<img/ig,'<img class="rich-img"')
      this.productDetail = data.detail
      this.dealVideo(data.detail.content)
    },
    async getProductComment(){
      const {data} = await this.$http.get('/comment/listRows',{
        goodsId:this.goodsId,
        limit:2
      })
      this.productComment = data.list
    },
    async getCommentCount(){
      const {data} = await this.$http.get('/comment/total',{goodsId:this.goodsId})
      this.commentCount = data.total.all
    },
    goCommentPage(){
      wx.navigateTo({
        url:'/pages_sub1/comment/comment?gid=' + this.goodsId
      })
    },
    onClick (e) {
	    console.log(e) 
      if (e.index === 1) {
        uni.switchTab({
          url:'/pages/cart/cart'
        })
      }     
	  },
	  buttonClick (e) {
	    console.log(e)
	  },
    openPopup() {
			this.$refs.popup.open()
      this.showPopup = true
		},
    closePopup() {
      this.$refs.popup.close()
    },
		changePopup(e) {
      this.showPopup = e.show
		},
    dealVideo(richtext){
      let contentArr = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')
      contentArr = richtext.split(/<video [^>]*src=['"]([^'"]+)[^>]*><\/video>/)
      this.contentArr = contentArr
      //contentArr中偶数为视频链接地址，奇数为富文本，利用循环渲染出来
    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
    padding-bottom: 100rpx;
  }
  image {
    width: 100%;
    height: 100%;
  }
  swiper {
    width: 100%;
    height: 700rpx;
  }
  .title-box {
    margin-top: 28rpx;
    height: 160rpx;
    background-color: #fff;
    padding: 10rpx 30rpx 20rpx;
    .price-box {
      display:flex;
      justify-content: space-between;
      align-items: center;
      .price{
        color: #fa2209;
        text {
          font-size: 40rpx;
        }
      }
      .line-price {
        margin-top: 10rpx;
        text-decoration: line-through;
        font-size: 26rpx;
        color: #959595;
      }
      .sold {
        margin:16rpx 0 0 220rpx;
        color: #959595;
        font-size: 22rpx;
      }
    }
    .title {
      margin-top: 20rpx;
      font-size: 30rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
  .guarantee {
    display: flex;
    align-items: center;
    padding: 10rpx 30rpx;
    view {
      margin-right: 40rpx;
      font-size: 26rpx;
    }
    .right{
      margin-left: 135rpx;
    }
  }
  .comment {
    margin-bottom: 20rpx;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 10rpx 40rpx 0;
      font-size: 28rpx;
      .right {
        margin-left: 320rpx;       
        font-size: 24rpx;
        color: #9999b3;
      }
    }
  }
  .content-title {
    box-sizing: border-box;
    padding-left: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
    font-size: 28rpx;
  }
  .rich-img {
    display: block;
    width: 100% !important;
  }
  .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .popup {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 460rpx;
    padding: 40rpx 80rpx;
    background-color: #fff;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    .icon-cross{
      position: absolute;
      top: 30rpx;
      right: 50rpx;
    }
    .title {
      text-align: center;
      font-size: 36rpx;
      font-weight: 700;
    }
    .item {
      position: relative;
      margin: 50rpx 0 10rpx 30rpx;
      .icon-ok {
        position: absolute;
        left: -60rpx;
      }
      .service {
        margin-bottom: 20rpx;
        font-size: 30rpx;
      }
      .desc {
        font-size: 26rpx;
        color: #6d6d6d;
      }
    }
  }
</style>